<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.min.js"></script>
	</head>
	<body>

		<div id="app">
		    {{message}}
		</div>


<script>
		   var obj2 =   new Vue({
		        //表示当前vue对象接管了div区域
		        el: '#app',
		        //定义数据
	             data: {
		            message: 'hello word',
		        },
		        //beforeCreate: 数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
		        beforeCreate: function () {
		            showMsg('---beforeCreate---', this);
		        },
		        //created ：数据已经绑定到了对象实例，但是还没有挂载对象
		        created: function () {
		            showMsg('---created---', this);
		        },
		        //beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的
		        beforeMount: function () {
		            showMsg('---beforeMount---', this);
		        },
		        //mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作当我们的data发生改变时，会调用beforeUpdate和updated方法
		        mounted: function () {
		            showMsg('---mounted---', this);
		        },

		        //beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听、还有watcher对象数据与view的绑定，即数据驱动
		        beforeDestroy: function () {
		            showMsg('---beforeDestroy---', this);
		        },
		    });

		    function showMsg(msg, obj) {
		        alert(msg);
		        alert("data:" + obj.message);
		        alert("el元素:" + obj.$el);
		        alert("元素的内容:" + document.getElementById("app").innerHTML);
		    }

		    //vue的销毁
		    obj2.$destroy();

		</script>
		</body>
		</html>




	   <!--
	        - beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
	        - created ：数据已经绑定到了对象实例，但是还没有挂载对象（使用ajax可在此方法中查询数据，调用函数）
	        - beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的
	        el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创
	        建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点
	        - mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们
	        就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并
	        进行各种操作当我们的data发生改变时，会调用beforeUpdate和updated方法
	        - beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还
	        没有发生改变
	        - updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到
	        dom上面，完成更新
	        - beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听、还有watcher对象数据
	        与view的绑定，即数据驱动
	       -->